<template>
	<!-- 文章搜索页 -->
	<view class="search-page">
		<u-navbar
		:title="'搜索: ' + searchText" 
		:is-back="true" 
		:background="navBgStyle" 
		title-color="#fff" 
		back-icon-color="#fff"
		>
		</u-navbar>
		
		
		<view class="content">
			<u-waterfall v-model="searchArtList" class="waterfall">
				<template v-slot:left="{leftList}">
					<view class="art-item" v-for="item in leftList" :key="item.id">
						<navigator open-type="navigate" :url=" '/subpages/artDetail/artDetail?artid=' + item.id">
							<view class="art-item-cover art-item-marbt">
								<u-lazy-load 
								threshold="-450" 
								border-radius="10" 
								:image="item.cover" 
								img-mode="widthFix"
								class="art-item-img"
								>
								</u-lazy-load>
							</view>
							
							<text class="art-item-title art-item-marbt">
								{{item.title}}
							</text>
							<view class="art-item-foot art-item-marbt">
								<view class="art-item-author">
									<u-avatar :src="item.userAvatar" size="28" class="art-item-ava"></u-avatar>
									<text>{{item.userName}}</text>
								</view>
								<view class="like">
									<u-icon name="thumb-up" color="#F2AE27" size="28" :label="item.like_count"></u-icon>
								</view>
							</view>
						</navigator>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="art-item" v-for="item in rightList" :key="item.id">
						<navigator open-type="navigate" :url=" '/subpages/artDetail/artDetail?artid=' + item.id">
							<view class="art-item-cover art-item-marbt">
								<u-lazy-load 
								threshold="-450" 
								border-radius="10" 
								:image="item.cover" 
								img-mode="widthFix"
								class="art-item-img"
								>
								</u-lazy-load>
							</view>
							
							<text class="art-item-title art-item-marbt">
								{{item.title}}
							</text>
							<view class="art-item-foot art-item-marbt">
								<view class="art-item-author">
									<u-avatar :src="item.userAvatar" size="28" class="art-item-ava"></u-avatar>
									<text>{{item.userName}}</text>
								</view>
								<view class="like">
									<u-icon name="thumb-up" color="#F2AE27" size="28" :label="item.like_count"></u-icon>
								</view>
							</view>
						</navigator>
					</view>
				</template>
			</u-waterfall>
			
			<u-empty 
			text="文章空空如也~" 
			mode="list" 
			:show="showSeachEmpty"
			class="seach-empty"
			></u-empty>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				searchText:'',		//  搜索关键词
				searchArtList: [],	//	搜索结果列表
				showSeachEmpty: true,	// 控制空数据是否显示图标
			}	
		},
		methods: {
			// 根据关键词搜索文章
			async getSearchArt() {
				// console.log(this.searchText);
				let searchRes = await this._api.getSearchArtByKeyWord(this.searchText);
				//console.log(searchRes);
				this.searchArtList = searchRes;
				(searchRes.length) && (this.showSeachEmpty = false)
			}
		},
		onLoad(options) {
			// 保存搜索关键词
			this.searchText = this.$Route.query.searchText
			// console.log(this.$Route);
			// 搜索文章
			this.getSearchArt();
		},
		computed:{
			...mapState({
				// tabbarList: state => state.componStyle.tabbarList,	// 	tabbar列表
				navBgStyle: state => state.componStyle.navBgStyle,	//	顶部导航栏样式
				// userInfo: state => state.userInfo.userInfo,			//	用户信息
			}),
		}
	}
</script>

<style lang="scss" scoped>
.search-page {
	padding: 20rpx;
	.content {
		.seach-empty {
			height: 500px;
		}
		.waterfall {
			width: 100%;
			margin-left: 10rpx;
		}
		.art-item {
			width: 95%;
			box-shadow: rgba(242,174,39, 0.24) 0px 3px 8px;
			padding: 8rpx 8rpx 0;
			border: 1rpx solid $uni-border-color;
			border-radius: 16rpx;
			background-color: $uni-bg-color;
			margin-bottom: 18rpx;
			
			.art-item-img{
				width: 100%;
			}
			.art-item-marbt {
				margin-bottom: 11rpx;
			}
			.art-item-title {
				font-size: 30rpx;
				
				padding: 5rpx 8rpx 0;
				/* 需要有宽度 */
				width: 100%;
				/* 超过了就隐藏 */
				overflow: hidden;
				/* 超过了就显示省略号 */
				word-break: break-word;
				text-overflow: ellipsis;
				/* webkit内核的浏览器 */
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.art-item-foot {
				/* #ifdef MP-WEIXIN */
					padding:5rpx 8rpx 10rpx;
				/* #endif */
				/* #ifndef MP-WEIXIN */
					padding: 0 8rpx;
				/* #endif */
				display: flex;
				align-items: center;
				justify-content: space-between;
				.art-item-author {
					font-size: 28rpx;
					height: 30rpx;
					display: flex;
					align-items: center;
					.art-item-ava {
						margin-right: 8rpx;
						vertical-align: middle;
						line-height: 30rpx;
					}
				}
			}
		}
	}
}
</style>
